import React from 'react'
// 侧边栏和顶部栏
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
// 路由
import {Route,Switch,Redirect } from 'react-router-dom'
// 主板组件
import Home from './home/Home'
import UserList from './user-manage/UserList'
import RoleList from './right-manage/RoleList'
import RightList from './right-manage/RightList'
import NoPermission from './noPermission/NoPermission'
// 样式
import './NewsSandBox.css'
// antd组件
import {Layout} from "antd";
const {Content} = Layout

export default function NewsSandBox() {
    return (
      //主板使用Layout布局
        <Layout>
          {/* 侧边栏，什么时候都有 */}
            <SideMenu/>
            <Layout className="site-layout">
              {/* 顶部栏，什么时候都有 */}
                <TopHeader/>
                {/* 主板内容模块 */}
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        overflow:'auto'
                    }}
                >
                  {/* 用路由来决定显示的模块是哪个组件 */}
                    <Switch>
                        <Route path='/home' component={Home} />
                        <Route path='/user-manage/list' component={UserList} />
                        <Route path='/right-manage/role/list' component={RoleList} />
                        <Route path='/right-manage/right/list' component={RightList} />
                        {/* 当url是/时，重定向到首页，不要忘了Redirect要搭配exact精准匹配 */}
                        <Redirect from="/" to="/home" exact/>
                        {/* 当前面都没有匹配上，就跳到403/404页面做出友好提示 */}
                        <Route path="*" component={NoPermission} />
                    </Switch>
                </Content>


            </Layout>


            
        </Layout>
    )
}
